<template>
  <view class="container" :class="activedTab == 'expense' ? 'const-height' : ''">
    <view :class="activedTab != 'expense' ? 'toptab' : ''">
      <ve-tabs :actived="activedIndex" :list="tabs" @change="tabsChange"></ve-tabs>
    </view>

    <!-- 交/还车信息 -->
    <GiveReturnCar :orderId="orderId" v-if="activedTab == 'returnGiveCar'" />
    <!-- 费用记录 -->
    <expense :orderId="orderId" v-else-if="activedTab == 'expense'" />
    <!-- 合同记录 -->
    <contract
      permission-prefix="svmsapp:order:long-order"
      :orderId="orderId"
      :contractIndex="contractIndex"
      :orderType="3"
      v-else-if="activedTab == 'contract'"
    />
    <!-- 续租记录 -->
    <renewal :orderId="orderId" v-else-if="activedTab == 'renewal'" />
    <!-- 换车记录 -->
    <vehicle :orderId="orderId" v-else-if="activedTab == 'vehicle'" />
    <!-- ETC订单 -->
    <etc-order :orderId="orderId" orderType="2" v-else-if="activedTab == 'etcOrder'" />
    <!-- 违章记录 -->
    <violation orderType="3" :orderId="orderId" v-else-if="activedTab == 'violation'" />
    <!-- 维修记录 -->
    <repair orderType="3" :orderId="orderId" v-else-if="activedTab == 'repair'" />
    <!-- 年检记录 -->
    <InspectRecord :orderId="orderId" v-else-if="activedTab == 'inspect'" />
    <!-- 保养记录 -->
    <MaintenanceRecord :orderId="orderId" v-else-if="activedTab == 'maintenance'" />
    <!-- 运营成本支出记录 -->
    <operating-cost :orderId="orderId" v-else-if="activedTab == 'operatingCost'" />
    <!-- 订单详情 -->
    <orderdetail :orderId="orderId" v-else />
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import orderdetail from './components/orderdetail.vue'
  import vehicle from './components/vehicle.vue'
  import renewal from './components/renewal.vue'
  import expense from './components/expense.vue'
  import GiveReturnCar from './components/give-return-car.vue'

  import violation from '../../components/detail/violation.vue'
  import repair from '../../components/detail/repair.vue'
  import InspectRecord from '@/pages/asset/car-inspect/simple-list.vue'
  import MaintenanceRecord from '@/pages/asset/car-maintenance/simple-list.vue'
  import contract from '../../components/detail/contract.vue'
  import OperatingCost from '../../components/operating-cost.vue'
  import EtcOrder from '../../components/etc-order.vue'

  const tabs = ref([
    { label: '订单详情', value: 'detail' },
    { label: '交/还车信息', value: 'returnGiveCar' },
    { label: '费用信息', value: 'expense' },
    { label: '合同记录', value: 'contract' },
    { label: '续租记录', value: 'renewal' },
    { label: '违章记录', value: 'violation' },
    { label: '换车记录', value: 'vehicle' },
    { label: 'ETC租赁订单', value: 'etcOrder' },
    { label: '运营成本支出记录', value: 'operatingCost' },
    { label: '维修记录', value: 'repair' },
    { label: '年检记录', value: 'inspect' },
    { label: '保养记录', value: 'maintenance' },
  ])

  const activedTab = ref('detail')
  const activedIndex = computed(() => tabs.value.findIndex((item) => item.value == activedTab.value))
  const tabsChange = (_, item) => {
    activedTab.value = item.value
  }

  const orderId = ref(null)
  const contractIndex = ref(0)
  onLoad((options) => {
    if (options.id) {
      orderId.value = options.id
      contractIndex.value = options.contractIndex ? +options.contractIndex : 0
      activedTab.value = options.tab || 'detail'
    }
  })
</script>

<style lang="scss" scoped>
  .const-height {
    min-height: 0;
    height: auto;
  }

  .toptab {
    position: -webkit-sticky;
    position: sticky;
    // #ifdef APP-PLUS
    top: 0px;
    // #endif
    // #ifdef H5
    top: 44px;
    // #endif
    z-index: 1;
  }
  .viewports {
    display: flex;
    flex-direction: column;
    padding: 24rpx 24rpx 0 24rpx;
  }
  .card__status {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    font-weight: 400;
    color: #ffffff;
    padding: 0 16rpx;
    margin-left: 16rpx;
    background: linear-gradient(58deg, #ff5b60 0%, #ff7a66 100%);
    opacity: 1;
    border: 2rpx solid #ffffff;
    border-radius: 50rpx;
  }
</style>
